<template>
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
     <div class="contianer-q">
      <div class="items-q"
      v-for="m in list"
      >
        <div class="img-q"
         @click="handleClick(m)"
        >
          <img :src="m.image_url"></img>
        </div>
        <div class="item-q">
          <h1>{{m.product_name}}</h1>
          <h2>
            {{m.product_description}}
          </h2>
          <span class="first">￥{{m.selling_price}}</span>
          <span class="second">已售出{{m.sales}} 件</span>
          <span class="third">
              <van-cell  
            @click="showPopup" 
           
            arrow-direction="left">
            <svg t="1623053475778" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3426" width="13" height="19">
            <path d="M428.6 924.2L96 619.5l67.8-74L328.2 696V110.3h100.4zM695.8 913.7H595.4V99.8L928 404.5l-67.8 74L695.8 328z" fill="#333333" p-id="3427">
                </path></svg>对比</van-cell>
            <van-popup 
            v-model="show" 
            position="bottom" 
            :style="{ height: '33.8%' }" 
          :overlay="false"
          closeable
            >
            <div style="font-size:0.16rem; padding:0.06rem 0 0 0.25rem">
            {{title}}
            </div>
            <div id="tc-2"  >
              <div id="tc-2-1"   >
             <div><a href="#">1</a></div><p>可以继续添加</p>
                </div>
              <div id="tc-2-1" ><div><a href="#">2</a></div><p>可以继续添加</p></div>
              <div id="tc-2-1" ><div><a href="#">3</a></div><p>可以继续添加</p></div>
              <div id="tc-2-1" ><div><a href="#">4</a></div><p>可以继续添加</p></div>
            </div>
            <div id="tc-3">
              <button class="bt">清空对比栏</button>
              <button class="bt">对比</button>
            </div>
            </van-popup>
          </span>
        </div>
    </div>
    </div>
    </van-pull-refresh>
</template>

<script>
import axios from "axios";
import Vue from "vue";
import { PullRefresh } from "vant";
import { Toast } from "vant";
import { Popup } from "vant";
import { Cell } from "vant";

Vue.use(PullRefresh, Toast, Popup, Cell);
export default {
  data() {
    return {
      list: [],
      count: 0,
      isLoading: false,
      show: false,
      title: "套餐对比",
      active: "2",
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
  },
async mounted(){
    let { limit, offset, ct } = this
      let result = await axios.get(`/kouqiang.json`)
    this.list = result.data
      },
        methods: {
    handleClick(m) {
      
      this.$router.push({
     
        path: '/details',
        query: {
          nm: m.product_name,
          img:m.image_url,
          des:m.product_description,
          pri:m.selling_price,
          sal:m.sales,
          mar:m.market_price
        }
      })
    }
  }
}
 
</script>

<style lang='stylus' scoped>
.contianer-q {
  margin: 0 0.15rem 0 0.15rem;
  height: 100%;

  .items-q {
    display: flex;
  }

  .img-q {
    margin-top: 0.1212rem;
    width: 1.0875rem;
    height: 1.0875rem;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.item-q {
  margin-left: 0.1212rem;
  margin-top: 0.1212rem;
  flex: 1;
  width: 2.175rem;
  height: 1.2078rem;
  position: relative;

  .first {
    color: #ff6732;
    font-size: 0.15rem;
    font-weight: bold;
    margin-right: 0.02rem;
  }

  .second {
    color: #999;
  }

  .third {
    color: #333333;
    position: absolute;
    right: 0;

    // position: relative;
    span {
      position: absolute;
      top: 0.015rem;
      left: -0.15rem;
    }
  }

  h1 {
    color: #2d2c2c;
    font-size: 0.1575rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  h2 {
    margin-top: 0.03rem;
    color: #999;
    font-size: 0.12rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

#tc-2 {
  width: 3.45rem;
  height: 1.05rem;
  display: flex;
  margin: 0.2rem auto;

  #tc-2-1 {
    width: 0.78rem;
    height: 1.05rem;
    margin-right: 0.11rem;

    div {
      height: 0.79rem;
      background-color: #f6f6f6;
      text-align: center;

      a {
        line-height: 0.79rem;
        font-size: 0.36rem;
        color: #cdcdcd;
      }
    }

    &:nth-child(4) {
      margin-right: 0;
    }

    p {
      font-size: 0.12rem;
      color: #999;
      margin-top: 0.07rem;
    }
  }
}

#tc-3 {
  width: 100%;
  height: 0.5rem;
  margin-top: 0.04rem;

  .bt {
    width: 50%;
    height: 0.5rem;
    outline: none;
    border: none;

    &:nth-child(1) {
      background-color: #ffffff;
      color: #FF6110;
      font-size: 0.16rem;
    }

    &:nth-child(2) {
      background-color: #EEEEEE;
      font-size: 0.16rem;
      color: #AAAAAA;
    }
  }
}
</style>